/* ---------------------------------- skin.js ------------------------------- */
(function() {
   var cssLoaded = {};

   function getName() {
      return VED.skinName.split( ',' )[ 0 ];
   }

   function getConfigPath() {
      // return VED.getUrl( VED.skinName.split( ',' )[ 1 ] || ( 'skins/' + getName() + '/' ) );
      return VED.getUrl( '../css/ved/' );
   }

   VED.skin = {
      path: getConfigPath,

      loadPart: function( part, fn ) {
         loadCss( part, fn );
      },

      getPath: function( part ) {
         return VED.getUrl( getCssPath( part ) );
      },

      icons: {},

      addIcon: function( name, path, offset, bgsize ) {
         name = name.toLowerCase();
         if( !this.icons[ name ] ) {
            this.icons[ name ] = {
               path: path,
               offset: offset || 0,
               bgsize : bgsize || '16px'
            };
         }
      },

      getIconStyle: function( name, rtl, overridePath, overrideOffset, overrideBgsize ) {
         var icon, path, offset, bgsize;

         if( name ) {
            name = name.toLowerCase();
            // If we're in RTL, try to get the RTL version of the icon.
            if( rtl )
               icon = this.icons[ name + '-rtl' ];

            // If not in LTR or no RTL version available, get the generic one.
            if( !icon )
               icon = this.icons[ name ];
         }

         path = overridePath || ( icon && icon.path ) || '';
         offset = overrideOffset || ( icon && icon.offset );
         bgsize = overrideBgsize || ( icon && icon.bgsize ) || '16px';

         return path &&
            ( 'background-image:url(' + VED.getUrl( path ) + ');background-position:0 ' + offset + 'px;background-size:' + bgsize + ';' );
      }
   };

   function getCssPath( part ) {
         // Check for ua-specific version of skin part.
         var uas = VED.skin[ 'ua_' + part ], env = VED.env;
         if( uas ) {

            // Having versioned UA checked first.
            uas = uas.split( ',' ).sort( function ( a, b ) { return a > b ? -1 : 1; } );

            // Loop through all ua entries, checking is any of them match the current ua.
            for( var i = 0, ua; i < uas.length; i++ ) {
               ua = uas[ i ];

               if( env.ie ) {
                  if( ( ua.replace( /^ie/, '' ) == env.version ) || ( env.quirks && ua == 'iequirks' ) )
                     ua = 'ie';
               }

               if( env[ ua ] ) {
                  part += '_' + uas[ i ];
                  break;
               }
            }
         }
         return VED.getUrl( getConfigPath() + part + '.css' );
   }

   function loadCss( part, callback ) {
      // Avoid reload.
      if( !cssLoaded[ part ] ) {
         VED.document.appendStyleSheet( getCssPath( part ) );
         cssLoaded[ part ] = 1;
      }

      // CSS loading should not be blocking.
      callback && callback();
   }

   VED.editor.implement({

      getUiColor: function() {
         return this.uiColor;
      },

      setUiColor: function( color ) {
         var uiStyle = getStylesheet( VED.document );

         return ( this.setUiColor = function( color ) {
            var chameleon = VED.skin.chameleon;

            var replace = [ [ uiColorRegexp, color ] ];
            this.uiColor = color;

            // Update general style.
            updateStylesheets( [ uiStyle ], chameleon( this, 'editor' ), replace );

            // Update panel styles.
            updateStylesheets( uiColorMenus, chameleon( this, 'panel' ), replace );
         }).call( this, color );
      }
   });

   var uiColorStylesheetId = 'ved_ui_color',
      uiColorMenus = [],
      uiColorRegexp = /\$color/g;

   function getStylesheet( document ) {
      var node = document.getById( uiColorStylesheetId );
      if( !node ) {
         node = document.getHead().append( 'style' );
         node.setAttribute( "id", uiColorStylesheetId );
         node.setAttribute( "type", "text/css" );
      }
      return node;
   }

   function updateStylesheets( styleNodes, styleContent, replace ) {
      var r, i, content;

      // We have to split CSS declarations for webkit.
      if( VED.env.webkit ) {
         styleContent = styleContent.split( '}' ).slice( 0, -1 );
         for ( i = 0; i < styleContent.length; i++ )
            styleContent[ i ] = styleContent[ i ].split( '{' );
      }

      for ( var id = 0; id < styleNodes.length; id++ ) {
         if( VED.env.webkit ) {
            for ( i = 0; i < styleContent.length; i++ ) {
               content = styleContent[ i ][ 1 ];
               for ( r = 0; r < replace.length; r++ )
                  content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );

               styleNodes[ id ].$.sheet.addRule( styleContent[ i ][ 0 ], content );
            }
         } else {
            content = styleContent;
            for ( r = 0; r < replace.length; r++ )
               content = content.replace( replace[ r ][ 0 ], replace[ r ][ 1 ] );

            if( VED.env.ie )
               styleNodes[ id ].$.styleSheet.cssText += content;
            else
               styleNodes[ id ].$.innerHTML += content;
         }
      }
   }

   VED.on( 'instanceLoaded', function( evt ) {
      // The chameleon feature is not for IE quirks.
      if( VED.env.ie && VED.env.quirks )
         return;

      var editor = evt.editor,
         showCallback = function( event ) {
            var panel = event.data[ 0 ] || event.data;
            var iframe = panel.element.getElementsByTag( 'iframe' ).getItem( 0 ).getFrameDocument();

            // Add stylesheet if missing.
            if( !iframe.getById( 'ved_ui_color' ) ) {
               var node = getStylesheet( iframe );
               uiColorMenus.push( node );

               var color = editor.getUiColor();
               // Set uiColor for new panel.
               if( color ) {
                  updateStylesheets( [ node ], VED.skin.chameleon( editor, 'panel' ), [ [ uiColorRegexp, color ] ] );
               }
            }
         };

      editor.on( 'panelShow', showCallback );
      editor.on( 'menuShow', showCallback );

      // Apply UI color if specified in config.
      if( editor.config.uiColor )
         editor.setUiColor( editor.config.uiColor );
   });
})();





